<template>
  <div class="box">
    <!-- 顶部logo  搜索  发布  -->
    <van-row>
      <!-- 左上角logo -->
      <van-col class="girl" span="4">
        <img src="../../assets/xiaonvhai.png" alt />
      </van-col>
      <!-- 搜索框 -->
      <van-col span="16">
        <form action="/">
          <van-search
            @click="getNewSearch"
            v-model="value"
            shape="round"
            background="white"
            placeholder="请输入搜索关键词"
          />
        </form>
      </van-col>
      <!-- 发布 -->
      <router-link to="/issue">
        <van-col class="issue" span="4">
          <img src="../../assets/fabu_caise.png" alt />
        </van-col>
      </router-link>
    </van-row>

    <!-- 专题分区切换 -->
    <div>
      <van-tabs>
        <van-tab class="tabbar" v-for="(item,categoryId) in list" :title="item.name" :key="categoryId">
          <home-tab :categoryId="item.categoryId"></home-tab>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import homeTab from "../home/HomeTab.vue";
import {getSubject} from "../../api/forum-api"
export default {
  data() {
    return {
      value: "",
      active: "1",
      list:{},
    };
  },
  created(){
    this.getSubject(); //专题列表
  },
  
  methods: {
    getSubject(){
         getSubject().then(res=>{
           this.list = res.rows
         })
    },
    //搜索框
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    // 跳转到搜索页面
    getNewSearch() {
      this.$router.push({
        path: "/searchinfo"
      });
    }
  },
  components: {
    homeTab
  }
};
</script>
<style lang="less" scoped>
.girl {
  padding: 10px;
}
.issue {
  padding: 10px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>